<template>
  <div :class="prefixCls">
    <a-tabs v-model:activeKey="activeKey" tab-position="left" type="card">
      <template v-for="item in appList" :key="item.idx">
        <a-tab-pane v-if="!!item.apps.length" :key="item.idx">
          <template #tab>
            <span class="flex items-center h-50px">
              <!--
                :src="require('/assets/images/nav/' + item.icon + '.png')"
                :src="getImgUrl(`${item.icon}.png`)"
               -->
              <img class="w-30px mr-4 w-full" alt="" :src="appIcons[item.icon]" />
              <span class="text-xl font-bold">{{ item.name }}</span>
            </span>
          </template>

          <div class="a-cart-list">
            <a-cart
              hoverable
              v-for="app in item.apps"
              :key="app.id"
              class="min-w-120px"
              @click="handleJump(app)"
            >
              <template #cover>
                <img :src="app.icon" class="w-220px h-120px" />
                <image :src="app.icon" />
              </template>
              <a-cart-meta class="cart-meta-title" :title="app.name" />
            </a-cart>
          </div>
        </a-tab-pane>
      </template>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Tabs, Card } from 'ant-design-vue'
  import { useDashboardStore } from '/@/store/modules/dashboard'
  import { useDesign } from '/@/hooks/web/useDesign'
  import { AppListItemModel, AppListItemChildModel } from '/@/api/sys/model/userModel'
  import { TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum'
  import { getAuthCache } from '/@/utils/auth'
  import { UserInfo } from '/#/store'
  import finance from '/@/assets/images/nav/finance.png'
  import other from '/@/assets/images/nav/other.png'
  import report from '/@/assets/images/nav/report.png'
  import sales from '/@/assets/images/nav/sales.png'
  import afterSale from '/@/assets/images/nav/after-sale.png'
  import supplyChain from '/@/assets/images/nav/supply-chain.png'

  const appIcons = {
    finance,
    other,
    report,
    sales,
    'after-sale': afterSale,
    'supply-chain': supplyChain,
  }

  const { prefixCls } = useDesign('dashboard')

  const [ATabs, ATabPane] = [Tabs, Tabs.TabPane]
  const [ACart, ACartMeta] = [Card, Card.Meta]
  const activeKey = ref(0)
  const appList = ref<AppListItemModel[]>([])

  const dashboardStore = useDashboardStore()

  async function getHaveAppIds() {
    const { appIds } = await dashboardStore.haveAppIds()
    return appIds
  }
  const getAppList = async () => {
    const appIds = await getHaveAppIds()
    const data = await dashboardStore.appList()
    if (!!data.appList.length) {
      data.appList.pop()
      data.appList.forEach((appItem) => {
        appItem.apps = appItem.apps.filter((app) => appIds.includes(String(app.id)))
      })
      console.log(data.appList)

      appList.value = data.appList
    }
  }
  getAppList()

  function handleJump(item: AppListItemChildModel) {
    const { url, id } = item
    console.log(url)
    const userInfo = getAuthCache<UserInfo>(USER_INFO_KEY)
    window.open(
      `${url}?token=${getAuthCache<string>(TOKEN_KEY)}&ERP_staffId=${userInfo.id}&id=${id}`,
    )
    // window.open(
    //   `http://192.168.3.44:5173/?token=${getAuthCache<string>(TOKEN_KEY)}&ERP_staffId=${
    //     userInfo.id
    //   }&id=${id}`,
    // )
  }
  // function getImgUrl(name: string) {
  //   return new URL('../../assets/images/nav/' + name, import.meta.url).href
  // }
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-dashboard';
  .@{prefix-cls} {
    .ant-tabs-card {
      height: calc(100vh - 48px);

      .ant-tabs-content-holder {
        overflow-y: auto;
      }

      .ant-tabs-tab {
        @apply bg-transparent border-transparent;
      }

      .ant-tabs-tab-active {
        @apply bg-light-50 border-light-50;
      }

      .ant-tabs-content {
        @apply h-full;
        // margin-top: 16px;

        > .ant-tabs-tabpane {
          @apply p-16px bg-light-50;
        }
      }

      > .ant-tabs-nav {
        @apply w-210px;

        &::before {
          @apply hidden;
        }
      }

      .ant-card-body {
        @apply h-full text-center;
      }
    }

    .a-cart-list {
      @apply grid gap-10;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
  }

  html[data-theme='dark'] {
    .@{prefix-cls} {
      .ant-tabs-card {
        .ant-tabs-tab {
          @apply bg-transparent border-transparent;
        }

        .ant-tabs-tab-active {
          @apply bg-[#1e1e1e] border-[#1e1e1e];
        }

        .ant-tabs-content {
          > .ant-tabs-tabpane {
            @apply bg-[#1e1e1e];
          }
        }
      }

      #components-tabs-demo-card-top {
        .code-box-demo {
          @apply bg-black;
        }
      }
    }
  }
</style>
